<template>
  <hry-header title="新闻详情" :showBackBtn="true" id="mobileNewDetail">
    <div slot="content" class="wrapper">
      <md-scroll-view ref="scrollView" :scrolling-x="false" :auto-reflow="true">
        <div class="content-wrapper">
          <h1 class="title">{{ htmlEncode(info.title) }}</h1>
          <div class="timer">
            <a-icon type="clock-circle" /> {{ info.create_time }}
          </div>
          <md-water-mark class="content" spacing="40vw">
            <div v-if="info.addondata" v-html="info.addondata.content"></div>
            <div slot="watermark" slot-scope="props">
              <span v-if="props.coord.row % 2"> 好融艺</span>
            </div>
          </md-water-mark>
        </div>
      </md-scroll-view>
    </div>
  </hry-header>
</template>

<script>
import { ScrollView, WaterMark } from "mand-mobile";
export default {
  name: "detail",
  components: {
    hryHeader: () => import("@/components/contentWrapper/index"),
    [ScrollView.name]: ScrollView,
    [WaterMark.name]: WaterMark
  },
  data() {
    return {
      info: {}
    };
  },
  methods: {
    htmlEncode(text) {
      if (text) {
        var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
        return text.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
          return arrEntities[t];
        });
      } else {
        return "";
      }
    },
    getDetail() {
      this.$ajax
        .get(this.$api.newDetail, { id: this.$route.params.id })
        .then(res => {
          this.info = res.data.archive;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  created() {
    this.getDetail();
  }
};
</script>

<style scoped lang="less">
.wrapper {
  height: 100%;
  .content-wrapper {
    background: @white;
    .title {
      padding-top: 33px;
      font-size: 28px;
      font-weight: bold;
      color: #000000;
      line-height: 36px;
      margin-bottom: 21px;
    }
    .timer {
      font-size: 20px;
      color: #999;
      margin-bottom: 41px;
    }
    img {
      width: 100%;
    }
  }
}
</style>
